<html>
<head>
    <style>
        *{
            margin:0px;padding:0px;
        }
        body,html{
            width:100%;
            height:100%;
        }
    </style>
    <link rel="stylesheet" href="/js/layui/css/layui.css" media="all">
</head>
<body style="overflow: hidden;">
<div style="display:flex;height:100%;flex-direction: column;margin:5px auto;">
    <div style="display:flex;align-items:center;margin:10px 0 0 10px;">
        <form class="layui-form" action="" style="height:36px;">
            <input type="hidden" class="input-text" id="ids" name="ids">
        </form>
        <div onclick="download()" style="margin-left:15px;width:100px;height:40px;background:#009688;border-radius:3px;line-height:40px;text-align:center;color:white;cursor:pointer;">批量导出</div>
    </div>
    <div id="container" style="overflow-y: auto;flex-grow:1;margin:10px 0 0 10px;">

    </div>
</div>
</body>
<script src="/js/layui/layui.js"></script>
<!--    <script src="./js/print.min.js"></script>-->
<script>
    function getQueryVariable(variable)
    {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i=0;i<vars.length;i++) {
            var pair = vars[i].split("=");
            if(pair[0] == variable){return pair[1];}
        }
        return(false);
    }

    var ids = getQueryVariable("ids")
    var t = getQueryVariable("type")
    var page = getQueryVariable("page")

    var arr = ids.split(",")
    console.log(arr);

    layui.use('form', function(){
        $ = layui.$
        initSel();
    });

    function initSel(){
        $("#container img").remove()
        for(var i = 0 ; i < arr.length ; i++) {
            var img = document.createElement("img")
            var img2 = document.createElement("img")
            if (page == 1) {
                img.src = "/gongpai/draw_gongpai?id=" + arr[i] + "&type=" + t + "&flag=" + 1
                img2.src = "/gongpai/draw_gongpai?id=" + arr[i] + "&type=" + t + "&flag=" + 0
            }
            img.style.border = "1px solid grey"
            img.style.width = "400px"
            img.style.height = "252px"
            img.style.margin = "5px"
            document.getElementById("container").appendChild(img)

            img2.style.border = "1px solid grey"
            img2.style.width = "400px"
            img2.style.height = "252px"
            img2.style.margin = "5px"
            document.getElementById("container").appendChild(img2)
            // img.onclick=function(){
            //     printJS({printable: img.getAttribute("src"), type: 'image', honorColor:true})
            // }
        }
    }



    function downloadIamge(imgsrc, name, m) { //下载图片地址和图片名
        let image = new Image();
        // 解决跨域 Canvas 污染问题
        image.setAttribute("crossOrigin", "anonymous");
        image.onload = function() {
            var str = "";
            if (m % 2 == 0) {
                str = "正面"
            }else {
                str = "反面"
            }
            let canvas = document.createElement("canvas");
            canvas.width = image.width;
            canvas.height = image.height;
            let context = canvas.getContext("2d");
            context.drawImage(image, 0, 0, image.width, image.height);
            let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
            let a = document.createElement("a"); // 生成一个a元素
            let event = new MouseEvent("click"); // 创建一个单击事件
            a.download = str + "-" + name || "photo"; // 设置图片名称
            a.href = url; // 将生成的URL设置为a.href属性
            a.dispatchEvent(event); // 触发a的单击事件
        };
        image.src = imgsrc;
    }

    function download(){
        var imgs = document.querySelectorAll("#container img")
        for(var i = 0 ; i < imgs.length ; i++) {
            var m = i ;
            $.ajax({
                url:"/cheliang/getCheliangById?id="+arr[Math.floor(i/2)] ,
                async:false ,
                success:function(res){
                    if (res.code == 0) {
                        downloadIamge(imgs[m].getAttribute("src") ,res.data.name+"-"+res.data.paizhao,m) ;
                    }
                }
            })
        }
    }
</script>
</html>